<template>
  <div id="change-invoice">
    <div class="portlet">
      <a-spin :spinning="spinning">
        <a-tabs defaultActiveKey="1" @change="callback">
          <a-tab-pane :tab="$t('pro.settings.depositActivity')" key="1">
            <pre-textarea
              :title="$t('pro.settings.depositActivity')"
              :html-for-editor="depositActivityHtml"
              @click="depositActivityOnClick"
            ></pre-textarea>
          </a-tab-pane>

          <a-tab-pane :tab="$t('pro.settings.transactionsActivity')" key="2" forceRender>
            <pre-textarea
              :title="$t('pro.settings.transactionsActivity')"
              :html-for-editor="transactionsActivityHtml"
              @click="transactionsActivityOnClick"
            ></pre-textarea>
          </a-tab-pane>

          <a-tab-pane :tab="this.$t('pro.settings.templateVariables')" key="3">
            <a-row class="template-row supply-roles" v-once>
              <a-col span="12">
                <p v-text="$t('pro.settings.templateVbName')"></p>
                <ul class="template-row-ul">
                  <li v-for="(item, index) in getNavList" :key="index">
                    <p>{{item.name}}</p>
                    <ul>
                      <li v-for="(item2, index2) in item.navList" :key="index2">{{ item2 }}</li>
                    </ul>
                  </li>
                </ul>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </div>
  </div>
</template>

<script>
import preTextarea from "../../../components/common/custom/PreTextarea";
import {
  getDepositActivity,
  getTransactionsActivity,
  changeDepositActivity,
  changeTransactionsActivity
} from "../../../api/user";
import ARow from "ant-design-vue/es/grid/Row";
import ACol from "ant-design-vue/es/grid/Col";
export default {
  name: "changeInvoice",
  components: { ACol, ARow, preTextarea },
  data() {
    return {
      depositActivityHtml: "",
      transactionsActivityHtml: "",
      spinning: false
    };
  },
  methods: {
    callback(key) {
      console.log(key);
      if (key == 2) {
        console.log(!this.transactionsActivityHtml);
        if (!this.transactionsActivityHtml) {
          this.publicGetData(
            getTransactionsActivity,
            "transactionsActivityHtml"
          );
        }
      }
    },

    //存款提交
    depositActivityOnClick(html) {
      if (!!html) {
        this.publicPostData(
          changeDepositActivity,
          html,
          this.publicGetData,
          getDepositActivity,
          "depositActivityHtml"
        );
      }
    },

    //交易提交
    transactionsActivityOnClick(html) {
      if (!!html) {
        this.publicPostData(
          changeTransactionsActivity,
          html,
          this.publicGetData,
          getTransactionsActivity,
          "transactionsActivityHtml"
        );
      }
    },

    publicGetData(fun, key) {
      this.spinning = true;
      setTimeout(() => {
        fun()
          .then(res => {
            let { code, data } = res.data;
            if (code == 200) {
              this[key] = data;
            }
          })
          .finally(() => {
            this.spinning = false;
          });
      }, 1000);
    },

    publicPostData(fun, params, fun2, fnPams1, fnPams2) {
      this.spinning = true;
      setTimeout(() => {
        fun(params)
          .then(res => {
            let { code } = res.data;
            if (code == 200) {
              this.$message.success(this.$t("pro.public.buttonSaveEd"));
              //回调
              fun2(fnPams1, fnPams2);
            }
          })
          .finally(() => {
            this.spinning = false;
          });
      }, 1000);
    }
  },
  mounted() {
    // this.initData()
    this.publicGetData(getDepositActivity, "depositActivityHtml");
  },
  computed: {
    getNavList() {
      return this.$t("pro.settings.templateVbList");
    }
  }
};
</script>

<style scoped lang="less">
#change-invoice {
  .portlet {
    .template-row {
      font-size: 1.4rem;
      .template-row-ul {
        margin-left: 60px;
        list-style-type: disc !important;
        margin-bottom: 20px;
        li {
          ul {
            margin-left: 20px;
            list-style-type: circle !important;
          }
        }
      }
    }
  }
}
</style>

